<template>
  <!-- 在共享市场  共享订单 列表   -->
  <el-dialog title="共享订单" :visible.sync="dialogVisible" @close="close" :close-on-click-modal="false" width="1260px" class="customTab customTabNew">

    <div class="tabs flex alc">
      <el-radio-group v-model="actived" @change="tabChange">
        <el-radio-button :label="tab.value" v-for="tab in tabOptions" :key="tab.value">{{ tab.name }}</el-radio-button>
      </el-radio-group>
      <!-- <div class="tongji_box" v-if="totalNumber">
        <span>
          总成本:
          <span class="price">{{ formatter(totalNumber.costPriceSum||0) }}</span>元
        </span>
        <span v-if="totalNumber.priceSum">
          总商品价:
          <span class="price">{{ formatter(totalNumber.priceSum||0) }}</span>元
        </span>
      </div> -->
    </div>
    <div class="table_box customTab table_box_new" v-loading="loading">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="zdy-form search-form-new" label-width="90px">
        <el-form-item label="管理方名称" prop="chuzufangName">
          <el-input v-model="queryParams.chuzufangName" placeholder="请输入管理方名称" clearable />
        </el-form-item>
        <el-form-item label="使用方名称" prop="zulinfangName">
          <el-input v-model="queryParams.zulinfangName" placeholder="请输入使用方名称" clearable />
        </el-form-item>
        <el-form-item label="运营商" prop="carrierId">
          <el-select v-model="queryParams.carrierId" placeholder="请选择运营商" clearable >
            <el-option v-for="dict in carrierTypes" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="共享单号" prop="no" label-width="70px">
          <el-input style="width: 200px;" v-model="queryParams.no" placeholder="请输入共享单号" clearable />
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table border stripe :data="tableData.records" >
        <el-table-column label="共享单号"  prop="no" width="200"/>
        <el-table-column label="订单类型"  prop="no" >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.orderType==1">新购</el-tag>
            <el-tag type="danger" v-if="scope.row.orderType==2">续费</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="管理方"  prop="chuzufangName" />
        <el-table-column label="使用方"  prop="zulinfangName" />
        <el-table-column label="运营商" prop="carrierName" />
        <el-table-column label="时长" prop="monthNum" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.monthNum }}月</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="num" width="80">
          <template slot-scope="scope">
            <span style="padding: 0 5px;" class="link" @click="openInfo(scope.row)">{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务费" prop="fuwufei" width="80"/>
        <el-table-column label="订单金额" prop="shifu" width="80"/>
        <el-table-column label="订单时间" prop="createTime" width="160"/>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope" >
            <el-button v-if="scope.row.orderType==1" @click="xufei(scope.row)" type="text">续费</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages-box">
      <pagination v-show="tableData.total>0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <addShiyong ref="addShiyong" @saved="search"></addShiyong>
    <shareOrderInfo ref="shareOrderInfo"></shareOrderInfo>
  </el-dialog>
</template>
<script>
import phoneApi from "@/api/phoneManage";
import addShiyong from "./addShiyong.vue";
import shareOrderInfo from "./shareOrderInfo.vue";
export default {
  name: "",
  components: {addShiyong,shareOrderInfo},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      actived:2,
      tableData: {
        records: [],
        total: 0,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataType: 2, //2我使用的  1我管理的
        zulinfangName: "",
        chuzufangName: "",
        carrierId: "",
        no:''
      },
      tabOptions: [
        {
          name: "我使用的",
          value: 2,
        },
        {
          name: "我管理的",
          value: 1,
        },
      ],
    };
  },
  created() {},
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    carrierTypes() {
      return this.$store.getters.gameYunyingshangList;
    },
  },
  methods: {
    // 打开弹窗
    open(option) {
      this.dialogVisible = true;
      if(option){
        this.queryParams.dataType = option.dataType||this.queryParams.dataType
        this.queryParams.no = option.no||this.queryParams.no
        this.actived = this.queryParams.dataType
      }
      this.getList();
    },
    xufei(row){
      this.$refs.addShiyong.open('xufei',row)
    },
    // 打开订单明细
    openInfo(row){
      this.$refs.shareOrderInfo.open(row)
    }, 
    // 搜索
    search(){
      this.queryParams.pageNum = 1
      this.getList();
    },
    // 重置搜索
    resetQuery(){
      const dataType = this.queryParams.dataType
      this.resetForm('queryForm')
      this.queryParams.dataType = dataType
      this.search()
    },
    // 查询订单列表
    getList() {
      this.loading = true;
      this.tableData.records = [];
      phoneApi.telShareOrderList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // tabs切换时触发
    tabChange(e) {
      this.queryParams.dataType = e;
      this.resetQuery();
    },

    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tabs{
  margin-bottom: 10px;
}
</style>
